<template>
	<view class="myorder" :class="{border:!flag}">
		<view class="top">
			<image src="/static/icon/white-back.png" mode="" @tap="back"></image>
			<view class="title">我的订单</view>
		</view>
		<view class="tab">
			<view class="tab-item" @tap="changeList(item)" v-for="(item, index) in tab" :key="index">
				<view :class="{ text: show == item.type }">{{ item.name }}</view>
				<view class="bor" :class="{ active: show == item.type }"></view>
			</view>
		</view>
		<view class="order"><order :lists="lists" @upload="newReq(show,3)" @order="order"></order></view>
		<view v-if="flag" class="show">
			<view class="show_null"><image src="/static/bg/null.png" mode=""></image></view>
			<view class="title">你还没有此类订单哦</view>
		</view>
	</view>
</template>

<script>
import moment from 'moment';
import order from '@/components/hotel/order/order'
export default {
	data() {
		return {
			show: '',
			flag:false,
			page:1,
			lists: [],
			tab: [{ name: '全部', type: '100' }, { name: '待接单', type: '10' }, { name: '待打扫', type: '20' }, { name: '待确认', type: '30' }, { name: '已完成', type: '40' }]
		};
	},
	onLoad(e) {
		this.show = e.type;
		uni.showLoading({title:'加载中！！'})
		this.newReq(e.type,1);
		this.order();
	},
	onReachBottom(){
		this.page ++;
		uni.showLoading({title:'加载中！！'})
		this.newReq(this.show,2)
	},
	methods: {
		back(){
			uni.navigateBack();
		},
		changeList(e) {
			this.show = e.type;
			this.page = 1;
			this.newReq(this.show,1);	
		},
		order(){
			new Promise(res=>{
				uni.$on('order',function(e){
					res(e)
				})
			}).then(v=>{
				console.log(v)
				this.lists.forEach(val=>{
					val.id == v ? val.id = null : '';
				})
				this.order();
			})	
		},
		newReq(e,type) {
			if(type == 3){
				// this.lists = [];
				this.page = 1;
			}
			if (!this.isLogin().hotel_id) {
				uni.showToast({
					title: '请先认证',
					icon: 'none'
				});
				this.flag = true;
				return;
			}
			let data = {
				hid: this.isLogin().hotel_id,
				position: 2,
				page:this.page,
				limit: 10,
				order_state: e
			};
			if (e == 100) {
				delete data.order_state;
			}
			this.req(
				{
					url: 'both/Order',
					data: data,
					method: 'get'
				},
				res => {
					console.log(res);
					if (res.data.status == 0 && type == 1) {
						this.lists = [];
						this.flag = true;
						uni.hideLoading()
						return;
					}
					if (res.data.status == 0 && type == 2) {
						this.showToast('没有更多数据了！');
						uni.hideLoading()
						return;
					}
					if (res.data.status == 0 && type == 3) {
						this.flag = true;
						uni.hideLoading()
						return;
					}
					this.flag = false;
					let orderData = res.data.data.data;
					orderData.forEach(val => {
						val.new_time = moment(val.subscribe_time*1000).format('YYYY-MM-DD HH:mm');
						switch (val.order_state) {
							case 0:
								val.new_order_state = '已取消';
								// val.new_btn = '退款详情';
								break;
							case 10:
								val.new_order_state = '待接单';
								val.new_btn = '取消订单';
								break;
							case 20:
								val.new_order_state = '待打扫';

								if(val.hotelCancle == 1){
									val.new_btn = '取消订单';
								} 
								break;
							case 30:
								val.new_order_state = '待确认';
								val.new_btn = '确认完成';
								break;
							case 40:
								val.new_order_state = '已完成';
								val.evaluation_state == 0?val.new_btn = '立即评价':val.new_btn = '查看评价'
								break;
						}
					});
					if(type == 2){
						this.lists = this.lists.concat(orderData);
					}else{
						this.lists = orderData
					}
					uni.hideLoading()
				}
			);
		}
	},
	components: {
		order
	}
};
</script>
<style>
page{
	height: auto !important;
}
.mescroll-upwarp{
	display: none !important;
}
</style>
<style scoped lang="scss">
.border{
	background-color: #f8f8f8;
}
.myorder {
	width: 750upx;
	.top{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 80upx;
		padding-top: var(--status-bar-height);
		background-color: #3595f9;
		z-index: 99;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.title{
			font-size: 36upx;
			margin-right: 304upx;
		}
		image{
			margin-left: 24upx;
			width: 32upx;
			height: 32upx;
		}
	}
	.tab {
		position: fixed;
		/* #ifdef APP-PLUS */
		top: calc( var(--status-bar-height) + 80upx );
		/* #endif */
		/* #ifndef APP-PLUS */
		top: 130upx;
		/* #endif */
		left: 0;
		z-index: 99;
		background-color: #fff;
		width: 750upx;
		height: 78upx;
		border-top: 1upx solid #e5e5e5;
		border-bottom: 1upx solid #e5e5e5;
		color: #999999;
		display: flex;
		align-items: center;
		justify-content: space-around;
		.tab-item {
			display: inline-block;
			text-align: center;
			font-size: 32upx;
			line-height: 32upx;
			color: #999999;
			line-height: 72upx;
			vertical-align: text-top;
			.text {
				color: #3595f9;
			}
			.bor {
				margin: 0 auto;
				width: 60upx;
				height: 6upx;
				background-color: #fff;
				border-radius: 2upx;
			}
			.active {
				margin: 0 auto;
				width: 60upx;
				height: 6upx;
				background-color: #3595f9;
				border-radius: 2upx;
			}
		}
	}
	.order {
		/* #ifdef APP-PLUS */
		margin-top: calc( var(--status-bar-height) + 158upx );
		/* #endif */
		/* #ifndef APP-PLUS */
		margin-top: 208upx;
		/* #endif */
	}
	.show {
		position: fixed;
		top: 30%;
		left: 202upx;
		z-index: -999;
		.show_null {
			image {
				width: 345upx;
				height: 310upx;
			}
		}
		.title {
			text-align: center;
			font-size: 24upx;
			color: #999;
		}
	}
}
</style>
